<template>
  <div class="scoreList" ref="homePage">
    <div class="bj">
      <van-nav-bar @click-left="clickleft" style="background: #ececec;" title="我的积分" left-text="" left-arrow>
        <div slot="right" class="searcha">
        </div>
      </van-nav-bar>
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div class="top">
      <p>可用积分</p>
      <div>{{Points}}</div>
    </div>
    <div class="recording_txtbox">
      <div class="recording">
        <p class="recording_txt">积分记录</p>

        <div v-show="datalist.length == 0" class="wudingdan">
          <van-icon name="description" />
          <p>亲,暂无相关数据哦</p>
        </div>
        <van-list v-show="datalist.length != 0" v-model="loading" :finished="finished" finished-text="没有更多了" @load="sLogList">
          <div v-for="(itme,index) in datalist" :key="index" class="recording_box">
            <div>
              <div style="font-size: 14px;"><span>{{itme.Info}}</span></div>
              <span style="color: rgb(174, 173, 173);">{{itme.Date}}</span>
            </div>
            <div>+{{itme.Points}}</div>
          </div>
        </van-list>
      </div>
    </div>
    <!-- <div style="width: 100%;height: 400px;"></div> -->
  </div>
</template>

<script>
  import {
    PointsLogList,
    getUserInfoByToken
  } from '@/api/home.js'
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        type: this.$route.query.type,
        datalist: [],
        loading: false, //控制上拉加载的加载动画
        finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
        NextSN: '',
        Points: '',
      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
      this.sLogList()
      this.getUserInfoByToken()
    },
    methods: {
      clickleft() {
        this.$router.back(-1);
        console.log(1)
      },
      sLogList() {
        let data = {
          NextSN: this.NextSN,
        }
        PointsLogList(data).then(res => {
          console.log(res)
          this.NextSN = res.NextSN
          if (res.List.length > 0) {
            this.datalist = this.datalist.concat(res.List);
          } else {
            // this.datalist = res.List
          }
          this.loading = false;


          if (this.NextSN == '') {
            this.finished = true;
          }
        })
      },
      getUserInfoByToken() { //通过token获取积分
        let data = {}
        getUserInfoByToken(data).then(res => {
          console.log(res);
          this.Points = res.Item.Points
        })
      },

    }
  }
</script>

<style lang="scss">
  .scoreList {
    .bj {
      .van-icon {
        color: white !important;

      }
    }

    .top {
      margin: 1.25rem 0.9375rem;
      height: 150px;
      background: white;
      border-radius: 0.5rem;
      // color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      box-shadow: 1px 1px 1px 1px #eee;

      p {
        // color: #000000;
        margin-bottom: 5px;
        font-weight: 400;
        font-size: 14px;
      }

      div {
        width: 150px;
        height: 40px;
        line-height: 40px;
        border-radius: 30px;
        background: #46d0ca;
        font-size: 14px;
        text-align: center;
        color: white;
      }
    }

    .recording_txtbox {
      width: 90%;
      margin: 0 auto;
      height: 430px;
      // border: 1px solid #eee;
      // box-shadow: 0px 0px 0px 1px #eee;
      overflow: hidden;
      overflow: scroll;
      // position: fixed;
      // left: 5%;
      .recording {
        width: 80%;
        margin: 0 auto;

        .recording_txt {
          width: 70%;
          margin: 0 auto;
          // position: fixed;
          text-align: center;
          font-size: 16px;
          background: #f6f6f6;
          color: rgb(40, 40, 40);
          height: 40px;
          line-height: 40px;
          border-bottom: 1px solid #eee;
        }

        .recording_box {
          width: 90%;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          padding: 10px 0;
          border-bottom: 1px solid #eee;

        }
      }
    }

  }
</style>
